<template>
  <div>

    <div class="show-swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in images" :key="item.id">
          <div class="showimagebox">
            <img :src="item.image" class="showimage"/>
          </div>
        </van-swipe-item>

      </van-swipe>
    </div>
    <div class="titleoldBox">
      <van-row class="titleBox">
        <van-col v-for="item in titles" span="8" class="titles">
          <div class="titleImage">
            <div class="titleImageBg">
              <img :src="item.icon" style="margin-top: 8px;"/>
            </div>

          </div>
          <span style="font-size: 15px">{{item.title}}</span>
        </van-col>

      </van-row>
    </div>

    <div style="margin-top: 10px">
      <h3 style="border-left: 2px solid red; padding-left: 5px;margin-bottom: 10px">编辑推荐</h3>
      <van-grid :column-num="3" style="">
        <van-grid-item v-for="value in 6" :key="value"  >
          <div>
            <img src="../../assets/phoneShow/title/title1.jpg" style="width: 100%">
          </div>
          <div>
            <span class="titleText">
              华语民谣|孤独的心诠释诗意和远方
            </span>
          </div>
        </van-grid-item>
      </van-grid>
    </div>

    <div style="margin-top: 10px">
      <h3 style="border-left: 2px solid red; padding-left: 5px;margin-bottom: 10px">最新音乐</h3>
      <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
      >
        <van-cell v-for="(item,index) in list" :key="index"  >
          <div style="display: flex; flex-direction:row" >
            <div style="flex: 1">
              <h4>{{item.name}}</h4>
              <span style="font-size: 10px">{{item.introduce}}</span>
            </div>
            <div >
              <span style="margin-top: 10px; display: inline-block">
                <van-icon name="play-circle-o" size="30px" color="red" />
              </span>

            </div>
          </div>


        </van-cell>
      </van-list>
    </div>

  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      images: [
        {
          id: 1,
          image: require('../../assets/phoneShow/show1.jpg')
        },
        {
          id: 2,
          image: require('../../assets/phoneShow/show2.jpg'),
        },
        {
          id: 3,
          image: require('../../assets/phoneShow/show3.jpg'),
        },
        {
          id: 4,
          image: require('../../assets/phoneShow/show4.jpg'),
        }
      ],
      titles: [
        {
          id: 1,
          icon: require('../../assets/home/日期.png'),
          title: "每日推荐"
        },
        {
          id: 2,
          icon: require('../../assets/home/电台.png'),
          title: "私人FM"
        },
        {
          id: 3,
          icon: require('../../assets/home/歌单.png'),
          title: "歌单"
        },
        {
          id: 4,
          icon: require('../../assets/home/排行榜.png'),
          title: "排行榜"
        },
        {
          id: 5,
          icon: require('../../assets/home/歌曲.png'),
          title: "关注新歌"
        },
        {
          id: 6,
          icon: require('../../assets/home/音乐专辑.png'),
          title: "数字专辑"
        }
      ],
      list: [
        {
          name: "爱在西元前",
          introduce: " 周杰伦-电视剧《丑女大翻身》片头曲"
        },
        {
          name: "爱在西元前",
          introduce: " 周杰伦-电视剧《丑女大翻身》片头曲"
        }
      ],
      loading: false,
      finished: false,
    }
  },
  methods:{
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 1; i < 5; i++) {
          let music = {
            name: "爱在西元前",
            introduce: " 周杰伦-电视剧《丑女大翻身》片头曲"
          }
          this.list.push(music);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 5000);
    }
  },
  mounted() {
    this.$store.state.phoneTitle = this.$route.meta.title
  }
}
</script>

<style scoped lang="less">
.my-swipe {
  margin-top: 20px;
  height: 150px;
  text-align: center;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  border-radius: 10px;
}

.showimage {
  border-radius: 10px;
  display: block;
  width: 100%;
  height: 100%;
}

.showimagebox {
  margin: 0 15px;
  height: 150px;
}

.titleoldBox{
  border-bottom: 1px solid #dbdbdb;
  padding: 15px 0;
  .titleBox {

    height: 150px;
    .titles {
      padding-top: 10px;
      height: 50%;
      text-align: center;

      .titleImage{
        text-align: center;
        .titleImageBg{
          margin: 0 auto;
          line-height: 40px;
          background-color: #ffe2eb;
          border-radius: 50%;
          height: 45px;
          width: 45px;
        }
      }
    }

  }

}

.titleText{
  font-size: 10px;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}


</style>